<template>
    <div>
        <ul>
            <li @click="toList(1)">太仓市大学生创业园租金补贴申请表</li>
            <li @click="toList(2)">太仓市大学生创业园带动就业补贴申请表</li>
            <li @click="toList(3)">太仓市大学生创业园企业见习申请表</li>
        </ul>
        <el-dialog width="600px" title="欢迎登陆" center :closeOnClickModal='false' :showClose='false' :visible.sync="dialogFormVisible3">
            <div>
                <el-form v-if='loging' :model="form2" :rules="rules2" ref="form2">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="账号密码登录" name="tab1"></el-tab-pane>
                    <el-tab-pane label="手机号登录" name="tab2"></el-tab-pane>
                </el-tabs>
                <div class="content" v-if="activeTab === 'tab1'">
                    <el-form-item label="用户名" prop='username'>
                        <el-input v-model="form2.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop='password'>
                        <el-input v-model="form2.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                </div>
                <div class="content" v-else>
                    <el-row>
                    <el-form-item label="手机号" prop='mobile'>
                        <el-input v-model="form2.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    </el-row>
                    <el-row :gutter='20' type="flex" align="bottom">
                    <el-col :span='18'>
                        <el-form-item label="验证码" prop='captcha'>
                        <el-input v-model="form2.captcha" placeholder="请输入短信验证码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                        <el-button type="primary" :disabled="codeDel != 60" style="margin-bottom: 22px;" @click="getIdCode('MEMBER_LOGIN')">{{codeMsg}}</el-button>
                    </el-col>
                    </el-row>  
                    <!-- <el-form-item label="验证码" prop='captcha'>
                        <el-input v-model="form2.captcha" placeholder="请输入验证码" type="password"></el-input>
                    </el-form-item>         -->
                </div>     
                </el-form>
                <el-form v-else :model="form2" :rules="rules2" ref="form2">      
                <el-form-item label="用户名" prop='username'>
                    <el-input v-model="form2.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop='password'>
                    <el-input v-model="form2.password" placeholder="至少六位，区分大小写" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop='password2'>
                    <el-input v-model="form2.password2" placeholder="确认密码" type="password"></el-input>
                </el-form-item>    
                <el-form-item label="手机号" prop='mobile'>
                    <el-input v-model="form2.mobile" placeholder="11位手机号">
                    <template slot="prepend">+86</template>
                    </el-input>
                </el-form-item>  
                <el-row :gutter='20' type="flex" align="bottom">
                    <el-col :span='18'>
                    <el-form-item label="验证码" prop='captcha'>
                        <el-input v-model="form2.captcha" placeholder="请输入短信验证码"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                    <el-button type="primary" :disabled="codeDel != 60" style="margin-bottom: 22px;" @click="getIdCode('MEMBER_REGISTER')">{{codeMsg}}</el-button>
                    </el-col>
                </el-row>                  
                </el-form>
            </div>
            <div slot="footer" v-if='loging' class="dialog-footer">
                <div>                    
                    <el-button type="text" @click="backtoIndex">返回首页</el-button>
                </div>
                <el-button type="default" @click="changeLogin(false)">去注册</el-button>
                <el-button type="primary" @click="toLoging">登录</el-button>
                <!-- <div>                    
                    <el-button type="text" @click="changeLogin(false)">返回首页</el-button>
                </div> -->
            </div>
            <div slot="footer" v-else class="dialog-footer">
                <el-button type="default" @click="changeLogin(true)">返回</el-button>
                <el-button type="primary" @click="toRegister">注册</el-button>
            </div>
            <Verify
                @success="capctchaCheckSucc"
                :mode="'pop'"
                :captchaType="'blockPuzzle'"
                :imgSize="{ width: '330px', height: '155px' }"
                ref="verify"
            ></Verify>
            </el-dialog>
        <div class='outLoginDiv'>
            <el-popover
            placement="top"
            width="160"
            class="outLogin"
            v-model="popVisible"
            >
            <p>确定登出该账号？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="loginOut">确定</el-button>
            </div>
            <el-button slot="reference" type='primary' size='mini'>登出</el-button>
            </el-popover>
        </div> 
    </div>
</template>
<script>
import Verify from '@/components/verifition/Verify'
import {registerSubmit, loginForm, getSms } from '../../api/requestForm.js'
export default {
    components: {
        Verify
    },
    data() {
        return {            
            codeDel: 60,
            codeMsg: '获取验证码',
            popVisible: false,
            form2: {},
            rules2: {
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, message: '密码至少六位', trigger: 'blur' }
                ],
                mobile: [
                { required: true, message: '此项必填', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
                ],
                username: [
                { required: true, message: '此项必填', trigger: 'blur' },
                ],
                password2: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                {
                    validator: (rules2, value, callback) => {
                        if (value !== this.form2.password) callback(new Error('两次密码不一致'))
                        callback()
                    }, trigger: 'blur'
                }
                ],
                captcha: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },            
            dialogFormVisible3: true,
            loging: true,
            activeTab: "tab1",
        }
    },
    methods: {
        toList(num) {
            switch(num) {
                case 1: this.$router.push({ path: '/zujinForm' }); break;
                case 2: this.$router.push({ path: '/jiuyeForm' }); break;
                case 3: this.$router.push({ path: '/jianxiForm' }); break;
            }   
        },
        // 图形验证
        capctchaCheckSucc (data) {
            this.capctchaCheck = true
            this.verify = data.captchaVerification
            // MEMBER_LOGIN MEMBER_REGISTER
            let sms = this.loging ? 'MEMBER_LOGIN' : 'MEMBER_REGISTER'
            this.getIdCode(sms)
        },
         // 获取验证码
        getIdCode(code) {
            if (!this.capctchaCheck) {
                this.$refs.verify.show()
                return false
            }
            // 验证码倒计时60s
            let that = this
            let form = {
                mobile: this.form2.mobile,
                smsType: code,
            }
            form = JSON.parse(JSON.stringify(form))
            console.log(form, 'code')
            getSms(form).then(res => {
                if(res.data.code == 0) {  
                console.log(res, 'getSms')
                function changeCodeDel() {
                    if(that.codeDel > 0) {        
                    that.codeDel --
                    that.codeMsg = '已发送' + that.codeDel + 's'
                    // console.log(that.codeDel)
                    } else {
                    that.codeDel = 60;
                    that.codeMsg = '获取验证码'
                    clearInterval(Interval)
                    that.capctchaCheck = false
                    }
                }
                let Interval = setInterval(() => {
                    changeCodeDel()
                }, 1000)
                } else {
                this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration: 3000
                })
                this.$refs.verify.refresh()
                }
            })
            // 增加倒计时不可点击
        },
        // 登录
        toLoging() {
            this.$refs['form2'].validate((valid) => {
                let that = this;
                if (valid) {
                    const form = JSON.parse(JSON.stringify(that.form2))
                    console.log(form, 'login')
                    loginForm(form).then(res => {
                    console.log(res)
                    if(res.data.code == 0) {          
                        that.dialogFormVisible3 = false;
                        this.$message({
                        message: '登录成功',
                        type: 'success',
                        duration: 3000
                        })
                        // 暂存token 手机号
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('tel', res.data.mobile)      
                    } else {
                        this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                        })
                    }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });     
        },
        // 登出
        loginOut() {
            this.popVisible = false;
            delete localStorage.token
            delete localStorage.tel
            location.reload()
        },
        // 注册
        toRegister() {
        this.$refs['form2'].validate((valid) => {
            let that = this;
            if (valid) {             
                const form = JSON.parse(JSON.stringify(that.form2))
                console.log(form, 'register')
                registerSubmit(form).then(res => {
                console.log(res)
                if(res.data.code == 0) {          
                    that.dialogFormVisible3 = false;
                    this.$message({
                    message: '注册成功，已登录',
                    type: 'success',
                    duration: 3000
                    })
                    localStorage.setItem('token', res.data.token)
                    localStorage.setItem('tel', res.data.mobile)
                    that.form.tel = res.data.mobile
                    that.loging = true
                    that.form2 = {};
                } else {
                    this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration: 3000
                    })
                }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });      
        },
        // 切换登录注册状态
        changeLogin(flag) {
            this.loging = flag;
            this.form2 = {};
        },
        ifLogin() {
            if(localStorage.getItem('token') && localStorage.getItem('tel')) {
                this.dialogFormVisible3 = false;
            }
        },
        backtoIndex() {
            this.$router.push({ path: '/' })
        },
    },
    created() {
        this.ifLogin()
    },
    watch: {
        activeTab(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.form2 = {}
        }
    }
}
</script>
<style scoped lang='less'>
li {
    color: blue;
    cursor: pointer;
}
</style>